<template>
  <div class="margin-top">
    <!-- 用户信息表格 -->
    <el-table :data="userInfo" style="width: 100%">
      <!-- 表格列 -->
      <el-table-column label="用户名" prop="uname"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="性别" prop="gender"></el-table-column>
      <el-table-column label="年龄" prop="age"></el-table-column>
      <el-table-column label="爱好" prop="hobby"></el-table-column>
      <el-table-column label="联系地址" prop="address"></el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="openEditDialog(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 修改个人信息对话框 -->
    <el-dialog title="修改个人信息" :visible.sync="editDialogVisible" width="30%">
      <!-- 表单 -->
      <el-form :model="editForm" label-width="100px" :rules="rules" ref="editFormRef">
        <el-form-item label="用户名" prop="uname">
          <!-- 禁用的输入框，显示用户名 -->
          <el-input v-model="editForm.uname" disabled></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <!-- 性别选择 -->
          <el-radio-group v-model="editForm.gender">
            <el-radio label="男">男</el-radio>
            <el-radio label="女">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <!-- 数字输入框，限制输入为数字 -->
          <el-input v-model.number="editForm.age" type="number"></el-input>
        </el-form-item>
        <el-form-item label="爱好" prop="hobby">
          <el-input v-model="editForm.hobby"></el-input>
        </el-form-item>
        <el-form-item label="联系地址" prop="address">
          <el-input v-model="editForm.address"></el-input>
        </el-form-item>
      </el-form>
      <!-- 对话框底部按钮 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios';
import { Message } from 'element-ui';

export default {
  data() {
    return {
      userInfo: [], // 用户信息
      editDialogVisible: false, // 修改对话框可见性
      editForm: { // 修改表单
        uname: '', // 用户名
        phone: '', // 手机号
        gender: '', // 性别
        age: '', // 年龄
        hobby: '', // 爱好
        address: '' // 联系地址
      },
      rules: { // 表单验证规则
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[0-9]{10}$/, message: '手机号必须为1开头的11位数字' }
        ],
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', min: 0, max: 100, message: '年龄必须在0到100之间' }
        ]
      }
    };
  },
  methods: {
    // 获取用户信息
    async fetchUserInfo() {
      try {
        const uname = localStorage.getItem('uname');
        if (uname) {
          const response = await axios.get(`/api/user/info?Uname=${uname}`);
          this.userInfo = response.data;
        }
      } catch (error) {
        console.error('获取用户信息失败:', error);
        Message.error('获取用户信息失败');
      }
    },
    // 打开修改对话框
    openEditDialog (row) {
      this.editDialogVisible = true;
      this.editForm = { ...row };
    },
    // 提交表单
    submitForm () {
      this.$refs.editFormRef.validate((valid) => {
        if (valid) {
          this.handleEdit();
        } else {
          console.error('提交失败!');
          return false;
        }
      });
    },
    // 处理编辑
    async handleEdit () {
      try {
        await axios.put(`/api/user/modifyUserInfo/${this.editForm.uname}`, this.editForm);
        Message.success('修改成功');
        this.editDialogVisible = false;
        this.$refs.editFormRef.resetFields(); // 重置表单
        await this.fetchUserInfo();
      } catch (error) {
        console.error('修改用户信息失败:', error);
        Message.error('修改用户信息失败');
      }
    }
  },
  mounted () {
    this.fetchUserInfo(); // 组件挂载时获取用户信息
  }
};
</script>

<style scoped>
.margin-top {
  margin-top: 20px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>
